
{{template "base.html" .}}

{{define "content"}}
<script>
    $("#teacher-left-que").addClass("layui-nav-itemed")
    $("#teacher-left-que dl dd").eq(1).addClass("layui-this")

    //处理question数据表的option，score
    function editString(str){
        var s = str.split("[")[1]
        s=s.split("]")[0]
        s=s.split(" ")
        return s
    }
    function editString1(str){
        var s = str.split("[")[1]
        s=s.split("]")[0]
        s=s.split(",")
        return s
    }
    $(function(){
        var resList = editString1($("#resList").text())
        var ScoreList =[]
        $(function(){
            $.ajax({
                method: "get",
                url: "/teacher/Paper/"+$("#question-id").text(),
                success:function(res){

                    if(res.code=='0'){
                        //绑定标题，备注
                        $(".question-list-title h1").text(res.PaperTitle)
                        $(".question-list-title div").text(res.paperContext)
                        //生成问题html
                        $(res.questions).each(function (){
                            $(".question-list-container").append($("#question-script").html())
                            questionSort()
                        })
                        $(".options-question").html("")
                        $(".question-list-li").each(function (i,btn){
                            //绑定问题数据
                            $(btn).find(".title-question span").text(res.questions[i].Question)
                            optionarrs=editString(res.questions[i].Options)
                            Scorearrs=editString(res.questions[i].Score)
                            ScoreList.push(editString(res.questions[i].Score))

                            $(optionarrs).each(function (k,v){
                                //绑定选项数据
                                if (resList[i]==k){
                                    var options="<li><input disabled checked name="+i+" type=\"radio\" value="+k+"><label>"+optionarrs[k]+"</label><span>"+Scorearrs[k]+"分</span></li>"
                                }else {
                                    var options="<li><input disabled name="+i+" type=\"radio\" value="+k+"><label>"+optionarrs[k]+"</label><span>"+Scorearrs[k]+"分</span></li>"
                                }
                                $(btn).find(".options-question").append(options)
                            })
                        })
                    }
                    else
                        window.location.replace("/404?msg="+res.msg);
                },
                error:function (data) {
                    window.location.replace("/404?msg="+data);
                }
            })
        })
    });


</script>
<div class="layui-row" style="height: auto;padding: 15px">
    <div></div>

    <div class="layui-col-md2" style="height: 200px">
        <button type="button" class="layui-btn btn-back">返回</button>
        <div style="display: none">id:<span id="question-id">{{.paperId}}</span></div>
        <div id="resList" style="display: none">{{.resList}}</div>
    </div>
    <div class="layui-col-md10" style="padding:0 25px;width: 898px;" >
        <div class="question-list" >
            <div class="question-list-title" title="编辑" onclick="titleEdit()">
                <h1 style="text-align: center"></h1>
                <div class="question-context"></div>
            </div>
            <div class="question-list-container" style="min-height: 569px">


            </div>
        </div>

        <!--问题-->
        <script type="text/html" id="question-script">
            <div class="question-list-li layui-anim layui-anim-upbit">
                <div class="div_preview">
                    <div class="title-question"><i class="question-number"></i><span>问题</span></div>
                    <div class="options-question">
                        <li><input type="radio" value="0"/><label>选项一</label><span>5分</span></li>
                    </div>
                </div>
            </div>
        </script>

    </div>
</div>


<script>
    //从父类种寻找元素
    function Parents_findNode(e,s){
        var node = e.parents(".question-list-li").find(s)
        return node
    }
    //问题排序
    function questionSort(){
        $(".question-list-li").each(function (i,btn){
            $(this).find(".question-number").html(i+1+'.')  //问题的编号
        })
    }
    $(".btn-back").click(function (){
        history.go(-1)
    })
</script>
<style>
    .layui-body{
        background: rgb(245, 245, 245);
    }
    .question-list{
        background-color:#FFFFFF;
        box-shadow: 0 2px 5px 0 #d9d9d9;
        border: 1px solid rgba(217,217,217,1);
        height: 830px;
        overflow-y:auto;
        position: relative;

    }
    .question-list-title{
        height: 150px;
        padding: 30px 0;
        border: none !important;
        border-bottom: 1px solid #e0e0e0 !important;
    }
    .question-context {
        padding: 0 60px;
        margin-top: 35px;
        font-size: 16px;
    }

    .question-list-li{
        line-height: 30px;
        border: none !important;
        border-bottom: 1px solid #e0e0e0 !important;
    }
    .question-list-li .remove{
        width: 50px;
        position: absolute;
        text-align: center;
        right: 0px;
        top: 0;
    }
    .question-list-li .remove:hover{
        cursor: pointer;
        background-color: #fafafa;
        border-bottom: 1px solid #e0e0e0 !important;
        border-left: 1px solid #e0e0e0 !important;
    }
    .question-list-li .remove i{
        font-size: 25px;
        vertical-align: middle;
    }
    .div_preview:hover{
        background-color: #fafafa;
        cursor: pointer;
    }
    .question-list-footer{
        position: sticky;
        bottom: 0;
        height: 50px;
        background-color: #2F4056;
        width: 100%;
        line-height: 50px;
        text-align: right;
        z-index: 2;


    }
    .question-list-footer button{
        font-size: 18px;
        font-weight: bold;
        float: right;
        border-radius: 0;
        height: 100%;
        padding-left: 15px;
    }
    .div_preview{
        padding: 30px 60px;
    }
    .title-question{
        width: 100%;
        font-weight: bold;
        color: #444444;
        line-height: 20px;
        font-size: 18px;
    }
    .title-question i{
        font-size: 25px;
    }
    .options-question{

        padding-top: 10px;
    }
    .options-question li{
        padding-left: 15px;
        padding-top: 10px;
    }
    .options-question li input {
        vertical-align: middle;
        height: 16px;
        width: 18px;
        margin-right: 5px;
        margin-bottom: 3px;
    }
    .options-question li span{
        float: right;
    }
</style>
{{end}}